<template>
  <view class="three" ref="webgl"></view>
  <!-- <view class="progress" v-if="percent < 100">
    <progress class="pr" :percent="percent" />
  </view> -->
</template>

<script setup>
  // 引入three.js
  import * as THREE from 'three';
  // 引入扩展库OrbitControls.js
  import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
  // 引入扩展库FBXLoader.js
  import { FBXLoader } from 'three/addons/loaders/FBXLoader.js';
  import { ref } from 'vue';
  import { onLoad,onReady, onUnload } from '@dcloudio/uni-app'
  
  const webgl  = ref(null)
  // 创建GLTF加载器对象
  const loader = new FBXLoader();
  //场景
  const scene  = new THREE.Scene();
  
  export default {
    data() {
      return {
        percent: 0
      }
    },
    mounted() {
      this.load() 
    }
    destroy() {
      THREE.Cache.clear();
      renderer.dispose();  
      renderer.forceContextLoss();  
      renderer.domElement = null;  
      renderer = null;
    },
    methods: {
      init(object) {
        console.log('=========================== init')
        const el     = webgl.value.$el
        const width  = el.clientWidth
        const height = el.clientHeight
        //相机视角
        const camera = new THREE.PerspectiveCamera(
            50, 
            width / height, 
            0.1, 
            2000
        );    
        camera.position.z = 1;
        // camera.position.set(200, 200, 200);
        // camera.lookAt(0, 0, 0);
        //光源
        const ambientLight     = new THREE.AmbientLight(0xffffff,30.5);
        scene.add(ambientLight);
        // 平行光
        const directionalLight = new THREE.DirectionalLight(0xffffff, 10);
        directionalLight.position.set(80, 100, 50);
        scene.add(directionalLight);
        //加载模型
        scene.add(object);     
        //渲染器
        const renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
        //解决加载gltf格式模型纹理贴图和原图不一样问题
        renderer.setPixelRatio(devicePixelRatio);
        renderer.setSize(width, height);
        //设置背景为透明，这样就可以自己加背景图片了
        renderer.setClearAlpha(0);
        el.appendChild(renderer.domElement)
        
        const controls = new OrbitControls(camera, renderer.domElement);
        //手势控制器
        controls.autoRotate = true;
        controls.enablePan = false;
        controls.maxDistance = 2;
        controls.minDistance = 0.5;
        controls.update();
        
        //60帧动画，360°自动旋转模型
        (function animate() {  
            requestAnimationFrame(animate);  
            controls.update();  
            renderer.render(scene, camera);
        })()
      },
      
      load() {
        var self = this
        loader.load(
            //模型的链接地址，这里的地址必须使用线上地址或者使用本地服务器
            // 'https://xxxxxxxx'+ mid.value +'.fbx',
            'http://61.169.159.99:9695/apk_hpzs/boy.FBX',
            object => {
              self.init(object)
            },
            //加载进度
            xhr => {
              console.log('=======================load, xhr: ', xhr.loaded, xhr.total); 
              self.percent = parseInt(( xhr.loaded / xhr.total * 100 ));    
            },    
            error => {     
              console.log('=============error')
              console.log(error); 
            }
        );
      },
    }
  }
</script>

<style>
  .three {
    width: 100vw;
    height: 100vh;
    background-color: #efefef;
  }
  .progress {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 20rpx;
    right: 20rpx;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .pr {
    width: 100%;
  }
</style>
